<template>
    <div id="app">
        <div>
            <span>姓名:</span>
            <input type="text" v-model="name"/>
        </div>
        <div>
            <span>年龄:</span>
            <input type="number" v-model.number="age"/>
        </div>
        <div>
            <span>性别:</span>
            <select v-model="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <button @click="addFn">添加/修改</button>
        </div>
        <div>
            <table border="1" cellpadding="10" cellspacing="0">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in list" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{item.name }}</td>
                    <td>{{item.age }}</td>
                    <td>{{item.sex }}</td>
                    <td>
                        <button @click="delFn(item.id)">删除</button>
                        <button @click="editFn(item.id)">编辑</button>
                    </td>                 
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            list: [
                {
                    id: 10,
                    name: 'xm',
                    age: 10,
                    sex: '男',
                },
                {
                    id: 11,
                    name: 'xh',
                    age: 11,
                    sex: '女',
                },
                {
                    id: 12,
                    name: 'xhua',
                    age: 12,
                    sex: '男',
                },
            ],
            name: '',
            age: '',
            sex: '',
            flag: '' //定义 flag 变量，根据它的值进行判断 若为 '' 表示新增逻辑；值 非空 为编辑逻辑
        }
    },

    methods: {
        // 新增功能
        addFn(){
           if(this.flag === ''){
               this.list.unshift({
                    id: +new Date(),
                    name: this.name,
                    age: this.age,
                    sex: this.sex,
           })}else{
                this.flag.name = this.name,
                this.flag.age = this.age,
                this.flag.sex = this.sex

                this.flag = ''
           }

              // 清空
              this.name = '',
              this.age = '',
              this.sex = '男'
        },

        // 删除功能
        delFn(id){
            this.list = this.list.filter(item => item.id !== id)
        },

        // 编辑功能
        editFn(id){
            const res = this.list.find(item => item.id === id)
            
            // 信息回显
            this.name = res.name
            this.age = res.age
            this.sex = res.sex

            this.flag = res
        },
    }
}
</script>
